<template>
	<ul class="item alert_items alert_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
		<router-link v-for="list of alertListData" :to="{path:'/getAlertDatail',query:{id:list.id}}" class="has_right_arrow" tag="li">
			<h3><span v-if="list.alertNumber">[</span>{{list.alertNumber}}<span v-if="list.alertNumber">]</span> {{list.bpType}}</h3>
			<p>
				<i class="icon_disk lightgreen_disk icon_time"></i>
				<span>{{list.accidentDate || '不确定'}}</span>
				<i class="icon_disk blue_disk ion ion-ios-location-outline"></i>
				<span>{{list.city || '未知'}}</span>
				<i class="icon_disk green_disk ion ion-android-navigate"></i>
				<span>{{list.country || '中国'}}</span>
			</p>
		</router-link>
		<li class="no_data" v-if="hasNoData">
			<i class="ion ion-ios-paper-outline"></i>
			<p>暂无数据</p>
		</li>
	</ul>
</template>
<script type="text/javascript">
	import getInterface from '../../assets/js/insterface.js'

	export default{
		data(){
			return{
				alertListUrl:getInterface.getAlertUrl,
				alertListData:[],
				hasNoData:false,
				busy: false,
				count:0,
				pageTotal:'',
			}
		},
		mounted(){
			document.title="事故Alert";
			this.$el.parentElement.parentNode.style.background = '#fafafa';
			this.getAlertListData();
		},
		methods:{
			loadMore(){
				let vue = this;
			      this.busy = true;
			      if(this.count< this.pageTotal){
				      setTimeout(() => {
				        vue.getAlertListData();
				      }, 1000);
			      }
			},
			getAlertListData(){
				let params = {
					'pageSize':'10',//每页显示的数目
					'currentPage':this.count
				}
				this.$http.post(this.alertListUrl,params,{emulateJSON: true})
				.then((response) => {
					console.log(response);
					if(response){
						if(response.data.resType == '00'){
							let resDatas = response.data.data;

							this.pageTotal = response.data.pages + 1;

							if(resDatas.length > 0){
								this.hasNoData= false;
								for(let i=0;i<resDatas.length;i++){
									this.alertListData.push(resDatas[i]);
								}
								this.count++;
							}
							this.busy = false;
						}else{
							this.hasNoData= true;
						}
					}
				})
			}
		}
	}
</script>
<style type="text/css"  lang="scss" scoped>
	$baseFontSize:10;

	.alert_items{
		.has_right_arrow{
			&:before{
				top:50%;
				font-size:24rem / $baseFontSize;
				margin-top: -12rem / $baseFontSize;
			}
		}
		li{
			margin-top: 10rem / $baseFontSize;
			h3{
				margin-bottom: 10rem / $baseFontSize;
				// border-bottom: 1px solid #ddd;
			}
			p{
				line-height: 200%;
				padding-left: 10rem / $baseFontSize;
			}
			.ion{
				color:#fff;
				font-size:11rem / $baseFontSize;
			}
		}

	}
</style>